<template>
    <div id="Seat">
        <!-- <span v-if="this.$route.query.sid"
      >传入的Id为 {{ this.$route.query.sid }}</span
    >
    <span v-else>消息：{{ msg }}</span> -->

        <DemoBlock title="预约日期">
            <van-field readonly clickable :value="dateFormatUtil('YYYY-mm-dd', reserverDate)" label="预约日期"
                placeholder="点击选择时间" @click="datePicker1 = true" />
            <!-- :min-date="minDate" :max-date="maxDate" -->
            <van-popup v-model="datePicker1" position="bottom">
                <van-datetime-picker type="date" title="选择年月日" @confirm="onConfirm3" v-model="reserverDate" />
            </van-popup>
        </DemoBlock>

        <DemoBlock title="已预约信息">
            <div class="apply-time" style="background-color: background-color: #f7f8fa; padding-left: 0.5rem;">
                <ul class="ulTimes" v-if="loadSuccess">
                    <li v-for="i in 15" :key="i" :data-time="pad(i + 7, 2) + ':00'">
                        <i v-for="j in 60" :key="j" :class="bitmap[i - 1][j - 1] ? 'on' : '' ">
                            <span v-if="j % 10 == 9"
                                style="width:4px;height:1px;background:#fff;position: absolute;bottom:0px;"></span>
                        </i>
                    </li>
                </ul>
            </div>
        </DemoBlock>

        <DemoBlock title="预约该座位">
            <van-field readonly clickable name="datetimePicker1" :value="startTime" label="开始时间" placeholder="点击选择时间"
                @click="showPicker1 = true" />
            <van-popup v-model="showPicker1" position="bottom">
                <van-datetime-picker type="time" title="选择时间" @confirm="onConfirm1" @cancel="showPicker1 = false" />
            </van-popup>

            <van-field readonly clickable name="datetimePicker2" :value="endTime" label="结束时间" placeholder="点击选择时间"
                @click="showPicker2 = true" />
            <van-popup v-model="showPicker2" position="bottom">
                <van-datetime-picker type="time" title="选择时间" @confirm="onConfirm2" @cancel="showPicker2 = false" />
            </van-popup>

            <div style="margin: 16px">
                <van-button round block type="info" native-type="button" @click="reserve">提交</van-button>
            </div>
        </DemoBlock>
    </div>
</template>

<script>
    import DemoBlock from "@/components/DemoBlock.vue";
    export default {
        name: "Seat",
        components: {
            DemoBlock,
        },
        data() {
            return {
                datePicker1: false,
                showPicker1: false,
                showPicker2: false,
                reserverDate: new Date(),
                startTime: "",
                endTime: "",
                bitmap: [],
                loadSuccess: false
            };
        },
        methods: {
            reserve() {
                let that = this;
                // 发送请求
                this.$axios
                    .post("/api/seatreservation/reservation/reserve", {
                        seatId: Number(this.$route.query.sid),
                        startTime: this.dateFormatUtil("YYYY-mm-dd", this.reserverDate) + ' ' + this.startTime +
                            ':00',
                        endTime: this.dateFormatUtil("YYYY-mm-dd", this.reserverDate) + ' ' + this.endTime + ':00'
                    })
                    .then((response) => {
                        console.log(response.data)
                        if (response.data.code != 200) {
                            that.$notify(response.data.message);
                            return;
                        }
                        this.$dialog.alert({
                            title: '提示',
                            message: '预约成功',
                            theme: 'round-button',
                        }).then(() => {
                            // on close
                            this.loadSeatReservationRecord(
                                Number(this.$route.query.sid),
                                this.dateFormatUtil("YYYY-mm-dd", new Date())
                            );
                        });
                    })
                    .catch((error) => {
                        that.$notify("网络异常");
                        console.log(error);
                    });
            },

            onConfirm1(time) {
                this.startTime = time;
                this.showPicker1 = false;
            },
            onConfirm2(time) {
                this.endTime = time;
                this.showPicker2 = false;
            },
            onConfirm3(date) {
                this.reserverDate = date;
                this.datePicker1 = false;
                this.loadSeatReservationRecord(
                    Number(this.$route.query.sid),
                    this.dateFormatUtil("YYYY-mm-dd", date)
                );
            },
            dateFormatUtil(fmt, date) {
                let ret;
                const opt = {
                    "Y+": date.getFullYear().toString(), // 年
                    "m+": (date.getMonth() + 1).toString(), // 月
                    "d+": date.getDate().toString(), // 日
                    "H+": date.getHours().toString(), // 时
                    "M+": date.getMinutes().toString(), // 分
                    "S+": date.getSeconds().toString(), // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (let k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(
                            ret[1],
                            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
                        );
                    }
                }
                return fmt;
            },
            loadSeatReservationRecord(seatId, date) {
                let that = this;
                // 发送请求
                this.$axios
                    .post("/api/seatreservation/reservation/somedayReservationList", {
                        seatId: seatId,
                        date: date,
                    })
                    .then((response) => {
                        if (response.data.code != 200) {
                            that.$notify("系统错误");
                            return;
                        }

                        /* 初始化二维数组 */
                        that.bitmap = new Array();
                        for (let i = 0; i < 15; i++) {
                            that.bitmap[i] = new Array();
                            for (let j = 0; j < 60; j++) {
                                that.bitmap[i][j] = false;
                            }
                        }

                        console.log(response);
                        let reservationList = response.data.data;
                        reservationList.forEach((element) => {
                            let sTime = element.startTime.split(" ")[1].substring(0, 5);
                            let eTime = element.endTime.split(" ")[1].substring(0, 5);
                            let sTimesHour = Number(sTime.split(":")[0]);
                            let sTimesMine = Number(sTime.split(":")[1]);
                            let eTimesHour = Number(eTime.split(":")[0]);
                            let eTimesMine = Number(eTime.split(":")[1]);

                            let j = sTimesMine;
                            for (let i = sTimesHour - 8; i <= eTimesHour - 8; i++) {
                                for (; j < 60; j++) {
                                    that.bitmap[i][j] = true;
                                    if (eTimesHour - 8 == i && eTimesMine == j)
                                        break;
                                }
                                j = 0;
                            }

                        });

                        that.loadSuccess = true;

                        // /* 设置flag */
                        // timeList.forEach(element => {
                        //   let hour = Number(element.split(":")[0]);
                        //   let mine = Number(element.split(":")[1]);
                        //   this.bitmap[hour- 8][mine] = true;

                        //   for (int i = hour; i < )

                        // });



                        console.log(that.bitmap);
                    })
                    .catch((error) => {
                        that.$notify("网络异常");
                        console.log(error);
                    });
            },
            // getState(hour, mine) {

            // }
            pad(num, n) {
                var len = n - num.toString().length;
                if (len <= 0) return num;
                return "0".repeat(len) + num.toString();
            },
        },
        mounted() {
            if (this.$route.query.sid == undefined || this.$route.query.sid == "") {
                this.msg = "参数有误";
                return;
            }
        },
        created() {

            this.loadSeatReservationRecord(
                Number(this.$route.query.sid),
                this.dateFormatUtil("YYYY-mm-dd", new Date())
            );

            // this.bitmap[0][0] = true;

            // console.log("Test", this.bitmap);
        },
    };
</script>

<style>
    #Seat {
        background-color: #f7f8fa;
    }

    .apply-time {
        width: 100%;
        padding: 2px;
        overflow: hidden;
    }

    .apply-time li {
        position: relative;
        float: left;
        margin-top: -1px;
        margin-left: -1px;
        padding-top: 1.4rem;
        /* 08:00的高度 */
        background: #c7d9ef;
        border: 1px solid #204c75;
    }

    .apply-time li::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        content: attr(data-time);
        font-size: 0.9rem;
        /* 08:00的字体大小 */
        line-height: 1.6rem;
        /* 08:00的上下位置 */
        text-align: center;
        color: #20354f;
    }

    .apply-time li i {
        display: block;
        float: left;
        width: 4px;
        height: 1.4rem;
        /* 蓝色小方块的高度 */
        background: #8cadd5;
        border-right: 1px solid #204c75;
        border-top: 1px solid #204c75;
        vertical-align: middle;
    }

    .apply-time li i:last-child {
        border-right: none;
    }

    .apply-time li i.on {
        background: #275ea2;
    }

    .apply-time li i.close {
        background: #c4c4c4;
    }
</style>
